<template>
  <div class="Detail">
    <div id="header" class="navi">
      <button @click="gotoTop()" class="naviBtn">TOP</button>
      <button v-for="(items) in pageData" :key="items.id" @click="gotoPage(items.content.toLowerCase())" class="naviBtn">{{items.content}}</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'DetailBaseViews',
  computed: {
    ...mapState('pageInfo', ['pageData'])
  },
  methods: {
    gotoTop () {
      this.$router.push('/top')
    },
    gotoPage (path) {
      if (this.$router.currentRoute.path !== `/details/${path}`) {
        this.$router.push(`/details/${path}`)
      }
    }
  }
}
</script>

<style scoped>
#header {
    transition: 0.3s;
}
.navi {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3000;
}
.navi .naviBtn {
    margin: 0 0.25em;
}
</style>
